<template>
	<view class="credit-list">
	
		<movable-area class="movableArea">
			<movable-view :x="x" :y="y" direction="all" @change="onChange" class="movableView">
				<uni-fab height="580rpx" :content="content" horizontal="right" :count="confirmtotal" :flag='false'
					direction="vertical" @trigger="trigger" :total="waitRecord.length">
				</uni-fab>

			</movable-view>
		</movable-area>
		<!--
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="false" :current="values.state" @change="change" inactive-color="#FFF"
				active-color="#FFF"></u-tabs>
		</view>
		<view class="tabs d-f-j-c-a-i">
			<u-search placeholder="请按名字搜索" v-model="values.name" height="58" bg-color='#FFF' :clearabled="true" :show-action="false"
				@search="search" shape="square">
			</u-search>
			<view class="select">
				<u-input class='input' v-model="values.type" height="62" :flag="false" type="select" :border="true" placeholder="按状态排序"  @click="typeShow = true" />
				<u-select v-model="typeShow"  :list="selectList" @confirm="typeConfirm"></u-select>
			</view>
		</view>
		<view class=" arrears">
			<view class="money">
				当前欠款金额：{{total_money}}￥
			</view>
			<view class="note money">
				合约共{{total}}张
			</view>
		</view>
		-->	
		
		<view class="credit-top">
			<view class="credit-top-left">
				<u-search placeholder="请按名字搜索"
						  height="58"
						  v-model="values.name"
						  bg-color="#FFF"
						  :clearabled="true"
						  :show-action="false"
						  @search="search"
						  shape="square"
						  >
				</u-search>
			</view>
			<view class="credit-top-right" @click="typeShow = true">
				<view class="credit-top-filter">
					<image src="../../../static/images2/icon/icon-sx.png" />
				</view>
				<view class="credit-top-txt">排序</view>
				<u-select v-model="typeShow"  :list="selectList" @confirm="typeConfirm"></u-select>
			</view>
		</view>
		
		<view class="credit-tab">
			<u-tabs :list="list" :is-scroll="false" :bold="false" :current="values.state" @change="change" bg-color="#FFFFFF00"></u-tabs>
		</view>
		<!-- 去掉
		<view class="arrears" >
			<view class="money">当前欠款金额：{{total_money}}￥</view>
			<view class="note money">合约共{{total}}张</view>
		</view>
		 -->
		<view class="personam">
			<view  v-for="(item,index) in rows" :key="index">
				<view @click="debtDetails(item)" v-if="item.repay_type==1">
					<disposable :item="item" ></disposable>
				</view>
				<view @click="debtDetails(item)" v-else>
					<stages :item="item" ></stages>
				</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" margin-top="10" :load-text="loadText" v-if="rows.length>5" />
		</view>	
		<u-empty text="暂无债务列表" mode="list" margin-top="100" v-if="total==0"></u-empty>
		<ditorsBar></ditorsBar>
		<u-popup mode="center" v-model="show" width="600" border-radius='10' height='600' :mask-close-able='false'>
			<view class="content">
				<view class="read">请认真阅读</view>
				<scroll-view scroll-y="true" style="height: 440rpx;">
					<view class="readingText" v-html="readingText.content"></view>
				</scroll-view>
				<view class="confrim-btn">
					<view class="know" :class="time==0?'active':''">
						<view  @click="close">我知道了</view>
						<view  v-if="time>0">({{time}}s)</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,mapMutations 
	} from 'vuex'
	import disposable from '@/components/debt/creditoeDisposable.vue' //一次性还款
	import stages from '@/components/debt/creditoeStages.vue' //分期还款
	import license from '@/components/agreement/license.vue' //
		import moment from 'moment'
	export default {
		data() {
			return {
				typeShow:false,
				time: 3,
				show: true,
				x: 600,
				y: 500,
				iconType: 'flower',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				values: {
					name: '',
					state: 0,
					order: '',
					type:'',
					page: 1,
				page_size: 5,
					
				}
			}
		},
		components: {
			disposable,
			stages,license
		},
		methods: {
			...mapActions({
				getdebt: 'MAY_DEBT/GET_DEBT', //获取债务列表
				 getNewDataMore: 'MAY_DEBT/GET_NEW_DATA_MORE', //获取债务列表
				getConfirmed: 'MAY_DEBT/GET_CONFIRMED',
				getwait: 'MAY_DEBT/GET_WAIT',//获取待签署合约列表
				getBulletBoxtext: 'OBLIGOR/GET_BULLET_BOXTEXT', //首页弹框阅读文字
			}),
				...mapMutations({
			changeStaus	: 'MAY_DEBT/CHANGE_STATUS', //获取轮播图
			}),
			onChange(e) {
				this.x = e.detail.x
				this.y = e.detail.y
			},
			trigger(val) {
               
				if (val.index == 0) {
					if (this.waitRecord.length == '0') {
						uni.showToast({
							title: '暂无待签署合约',
							icon: 'error',
							duration: 2000
						});
						return
					}
					uni.navigateTo({
						url: '/pages/creditor/personam/signed'
					});

				} else if(val.index == 1) {
					if (this.confirmtotal == '0') {
						uni.showToast({
							title: '暂无待确认合约',
							icon: 'error',
							duration: 2000
						});
						return
					}
					uni.navigateTo({
						url: '/pages/creditor/personam/confirmation'
					});
				}else{
					uni.navigateTo({
						url: '/pages/creditor/personam/launch'
					});
				}
			},
			//按条件来筛选
			change(index) {
				this.values.state = index;
				this.values.page=1
				this.search()
			},
			//按名字/状态来筛选
			search() {
				this.values.page=1
				let values = JSON.parse(JSON.stringify(this.values));
				
				let state = values.state
				if (state === 0) {
					state = ''
				} else {
					state -= 1
				}
				values.state = state
				this.getdebt(values)
			},
			typeConfirm(e){
				this.values.page=1
				this.values.order=e[0].value
				this.values.type=e[0].label
				this.search()
				
			},
			debtDetails(item) {
				uni.navigateTo({
					url: `/pages/creditor/personam/debtDetails?id=${item.id}`
				});
			},
			close() {
				if (this.time == 0) {
					this.show = false
					let date = moment(new Date()).valueOf()
					uni.setStorageSync('dates', JSON.stringify(date));
				}
			},
			
		},
		mounted() {
			this.timer = setInterval(() => {
				if (this.time > 0) {
					this.time--
				}
			}, 1000)
		},
		onShow() {
			this.getBulletBoxtext() //首页弹框阅读文字
			this.values.page=1
			this.values.page_size=5
			let values=JSON.parse(JSON.stringify(this.values))
			values.state=0
			this.search()
			this.getConfirmed(values)
			this.getwait()
			if (uni.getStorageSync('dates')) {
				let oldDate = JSON.parse(uni.getStorageSync('dates'))
				let newDate = moment(new Date()).valueOf()
				if (newDate - oldDate > 7200000) {
					this.show = true
				}
			}else{
				this.show = true
			}
		},
		onReachBottom(){
         if (this.values.page_size * this.values.page < this.total) {
					this.values.page = this.values.page  + 1
					this.changeStaus('loading')
					
					let values = JSON.parse(JSON.stringify(this.values));
					let state = values.state
					if (state === 0) {
						state = ''
					} else {
						state -= 1
					}
					values.state = state
					this.getNewDataMore(values)
					
				} else {
					this.changeStaus('nomore')
					
				}
		},
		onUnload() {
			clearInterval(this.timer)
		},
		computed: {
			...mapState({
				selectList: (state) => state.MAY_DEBT.selectList, //排序条件数组
				list: (state) => state.MAY_DEBT.creditorsList, //选择数组
				content: (state) => state.MAY_DEBT.crediContent, //悬浮窗数组
				rows: (state) => state.MAY_DEBT.rows, //债务数组
				total: (state) => state.MAY_DEBT.total, //总数
				total_money: (state) => state.MAY_DEBT.total_money, //总欠款金额
				confirmtotal: (state) => state.MAY_DEBT.confirmtotal, //待确认合约
				waitRecord: (state) => state.MAY_DEBT.waitRecord, //待确认合约
				status: (state) => state.MAY_DEBT.status,
				readingText: (state) => state.OBLIGOR.readingText,
			})
		}
	}
</script>

<style scoped lang='scss'>
	.credit-list {
		padding-top: 30rpx;
		min-height: 100%;
		background: #EDF2FC;
	}
	.credit-top {
		width: 690rpx;
		margin:  0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		&-left {
			flex: 1;
			
			/deep/ {
				.u-search {
					height: 70rpx;
					
					.u-content {
						height: 100% !important;
						border-radius: 100rpx !important;
						border: 1px solid #BFBFBF;
					}
				}
			}
		}
		
		&-right {
			margin-left: 15rpx;
			display: flex;
		}
		&-filter {
			width: 30rpx;
			height: 30rpx;
			
			uni-image {
				width: 100%;
				height: 100%;
			}
		}
		
		&-txt {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin-left: 8rpx;
		}
	}
	
	.credit-tab {
		height: 80rpx;
		margin-top: 20rpx;
	}
	
	.arrears {
		background: #a3cafa;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx 20rpx;
	}
	.money {
	  font-size: 26rpx;
	  color: #0036cb;
	}
	
	.readingText {
		padding: 0px 20rpx;
	}
	.read {
		font-size: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		font-weight: 700;
	}
	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素

		.movableView {
			pointer-events: auto; //可以点击
			width: 120rpx;
			height: 110rpx;

			image {
				width: 100%;
				height: 100%;
			}

		}
	}



	.note {
		position: absolute;
		right: 20rpx;
	}

</style>
<style lang='scss'>
	.tabs {
		width: 100%;
		height: 88rpx;
		background-color: #E24D49;

		.u-tabs {
			width: 100%;
			height: 100%;
			background-color: #E24D49 !important;
		}

		.u-search {
			margin-left: 32rpx !important;
			height: 58rpx;
		}

		.select {
			width: 244rpx;
			height: 58rpx;
			margin-left: 16rpx;
			margin-right: 36rpx !important;
            background: #FFFFFF;
			border-radius: 10rpx;

		}
	}
	.know {
		font-size: 32rpx;
		color: #90939D;
		display: flex;
	}

	.active {
		color: #4A8FF9;
	}
	.personam{
		padding-bottom: 130rpx;
	}
</style>
<style>
	page {
		background: #FAFAFA;
	}
</style>
